<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>订单</title>
		<link rel="stylesheet" href="css/public.css" />
		<link rel="stylesheet" href="css/orders.css" />

	</head>
	<body>
		<div class="header">
			<div class="h_link_bg">
				<div class="h_link">
					<div class="h_logo"><img src="img/register.png" alt="" /></div>
					<div class="h_content">
						<ul>
							<li><a href="login.html">登录</a></li>
							<li><a href="register.html">注册</a></li>
							<li><a href="">|</a></li>
							<li class="myCart">
								<a href="shopping cart.html">购物</a>
								<div class="car">

									<p>你的购物车暂时没有商品...</p>
									<p>快去抢购良仓商品吧!</p>

								</div>
							</li>
							<li><a href="">|</a></li>
							<li class="message">
								<a href="">消息</a>
								<div>
									<ul>
										<li><a href="#">动态<span>0</span></a></li>
										<li><a href="#">评论<span>0</span></a></li>
										<li><a href="#">私信<span>0</span></a></li>
										<li><a href="#">喜欢<span>0</span></a></li>
										<li><a href="#">粉丝<span>0</span></a></li>
										<li><a href="#">通知<span>0</span></a></li>
									</ul>
								</div>

							</li>
							<li><a href="">|</a></li>
							<li><a href="">添加良品</a></li>
							<li><a href="">资质证照|协议规则</a></li>
						</ul>
					</div>
				</div>
			</div>
			<div class="h_nav">
				<ul>
					<li><a href="index.html">首页</a></li>
					<li class="good_type">
						<a href="goodlist.html">商店</a>
						<div>
							<div class="type_list">
								<ul>
									<!--<li>
												<a href="#">
												    <img src="img/nav_icon3.png" alt="" />
												    <p>玩乐</p>
												</a>
											</li>-->
								</ul>
							</div>
							<div class="type_img">
								<div><img src="img/nav_banner.jpg" alt="" /></div>
								<p>新视界:2024年12月刊</p>
							</div>
							<div class="type_link">
								<p>
									<a href="#">查看所有品牌</a>
									<a href="#">最新到货</a>
								</p>
							</div>
						</div>
					</li>
					<li class="magazine">
						<a href="magazine.html">杂志</a>
						<div>
							<ul>
								<li><a href="">趣物</a></li>
								<li><a href="">数码</a></li>
								<li><a href="">汽车</a></li>
								<li><a href="">文化</a></li>
								<li><a href="">时尚</a></li>
								<li><a href="">美食</a></li>
								<li><a href="">建筑</a></li>
								<li><a href="">空间</a></li>
								<li><a href="">圈子</a></li>
								<li><a href="">清洁</a></li>
								<li><a href="">活动</a></li>
								<li><a href="">视频</a></li>
							</ul>
						</div>
					</li>
					<li><a href="#">分享</a></li>
					<li><a href="#">达人</a></li>
					<li><a href="#">有偿资讯</a></li>
					<div class="search">
						<input type="text" name="keyWorks" id="searchInput" placeholder="请输入搜索关键词" />
						<div id="searchBtn"></div>
					</div>
				</ul>



			</div>
		</div>

		<div class="main">
			<div><img src="img/payBanner.jpg" alt="" /></div>
			<div class="cart_top">
				<p>|<a href="">购物车</a>|<span><a href="">付款</a></span>|</p>
			</div>

			<p class="order_text">收货地址</p>

			<div class="address-container" id="addressContainer"></div>

			<div class="order_address">
				<div class="order_name">
					<span>收货人姓名</span><input type="text" id="nameInput" />
				</div>
				<div class="order_sheng"><span>省／市 </span>
					<select id="province">
						<option value="">所在省份</option>
						<option value="bj">北京市</option>
						<option value="tj">天津市</option>
						<option value="sh">上海市</option>
						<option value="cq">重庆市</option>
						<option value="he">河北省</option>
						<option value="sx">山西省</option>
						<option value="nm">内蒙古自治区</option>
						<option value="ln">辽宁省</option>
						<option value="jl">吉林省</option>
						<option value="hl">黑龙江省</option>
						<option value="js">江苏省</option>
						<option value="zj">浙江省</option>
						<option value="ah">安徽省</option>
						<option value="fj">福建省</option>
						<option value="jx">江西省</option>
						<option value="sd">山东省</option>
						<option value="ha">河南省</option>
						<option value="hb">湖北省</option>
						<option value="hn">湖南省</option>
						<option value="gd">广东省</option>
						<option value="gx">广西壮族自治区</option>
						<option value="hi">海南省</option>
						<option value="sc">四川省</option>
						<option value="gz">贵州省</option>
						<option value="yn">云南省</option>
						<option value="xz">西藏自治区</option>
						<option value="sn">陕西省</option>
						<option value="gs">甘肃省</option>
						<option value="qh">青海省</option>
						<option value="nx">宁夏回族自治区</option>
						<option value="xj">新疆维吾尔自治区</option>
						<option value="tw">台湾省</option>
						<option value="hk">香港特别行政区</option>
						<option value="mo">澳门特别行政区</option>
					</select>
					<select id="city">
						<option value="">所在市</option>
					</select>
				</div>
				<div class="order_details"><span>详细地址</span><input type="text" id="detailAddress" /></div>
				<div class="order_phone"><span>手机号码</span><input type="number" id="phoneInput" /></div>
				<div><button class="order_btn" id="saveAddressBtn">保存地址</button></div>
			</div>


			<p class="order_order_xiangqing">订单详情</p>
			<div class="order-items-container"></div>
			<div class="order_remark"><span>备注:</span><input type="text" placeholder="您可在此写下订单备注,不得超过350字符" /></div>
			<div class="order_cash"><span>激活代金券</span><input type="number"
					placeholder="请输入代金券" /><button>确认使用</button><a href="">代金券使用方法</a></div>
			<div class="order_list">
				<ul>
					<li>代金券减免-元</li>
					<li>满减活动减免 - 元</li>
					<li>折扣活动减免 - 元</li>
					<li>付款总额 : ¥</li>
					<li>¥0</li>
					<li>为您节省 元</li>
					<li>(含¥礼物包装费)</li>
				</ul>
			</div>
			<p class="jiesuan">结算方式</p>
			<div class="order_radio">
				<div class="order_radio1"><input type="radio" /></div>
				<div class="order_img"><img src="img/zfb.png" alt="" /></div>
			</div>
			<p class="order_text1">若您遇到支付问题，请联系客服热线 400 897 6336（工作日 09:00-18:00）</p>
			<p class="order_btn1"><button id="paymentButton">>结算</button></p>
		</div>





		<div class=" footer">
			<div class="logo">
				<div class="logo_title">
					<div class="logo_finger"></div>
					<div>
						<p>良仓商品/OUR SHOP</p>
					</div>
				</div>
				<div class="logo_list">
					<ul>
						<li>
							<div class="icon1"></div>
							<div>
								<p>全球精品</p>
								<p>Global Selections</p>
							</div>
						</li>
						<li>
							<div class="icon2"></div>
							<div>
								<p>正品保证</p>
								<p>Authenticity Guaranteed</p>
							</div>
						</li>
						<li>
							<div class="icon3"></div>
							<div>
								<p>全场包邮</p>
								<p>Free Delivery</p>
							</div>
						</li>
						<li>
							<div class="icon4"></div>
							<div>
								<p>客服邮箱</p>
								<p>kefu@iliangcang.com</p>
							</div>
						</li>
					</ul>
				</div>
			</div>
			<div class="footer_bg">
				<div class="footer_info">
					<div class="info">
						<div>
							<div class="icon_phone"></div>
							<div>
								<p>iPhone Android</p>
								<p>客户端下载</p>
							</div>
						</div>
						<div>
							<ul>
								<li><img src="img/dou.png" /></li>
								<li><img src="img/wb.png" /></li>
								<li><img src="img/qq.png" /></li>
							</ul>
						</div>
					</div>
					<div class="address">
						<p><a href="#">关于良仓</a>|<a href="#">服务协议</a>|<a href="#">隐私保护协议</a>|<a href="#">使用指南</a>|<a
								href="#">联系我们</a>|
							<a href="#">加入我们</a>|<a href="#">友情链接</a>|<a href="#">私信良仓</a>
						</p>
						<p>©2013-2019 北京良仓文化传播有限公司版权所有</p>
						<p>公司名称：北京良仓文化传播有限公司 客服邮箱：kefu@iliangcang.com</p>
						<p>公司地址：北京朝阳区百子湾路32号6号楼1层60号.</p>
						<p>社会信用统一代码：91110105059231575L 食品许可证：JY11105160159557 </p>
						<p>图书证名称：中华人民共和国出版物经营许可证 图书证编号：新出发京零 字第 朝 150051 号</p>
						<p>京ICP备13010677号-1 京公网安备11010502025627</p>
					</div>
				</div>
			</div>

			<div class="side">
				<div class="code">
					<div class="qrCode"><img src="img/orcode10.png" alt="" /></div>
					<div><button class="close"></button></div>
				</div>
				<div class="arrow"></div>

				<div class="concart">联系客服</div>
			</div>


		</div>
	</body>
	<script src="js/ajax.js"></script>
	<script src="js/public.js"></script>
	<script src="js/orders.js"></script>
	<script src="js/searchgood.js"></script>
	<script>
		document.addEventListener('DOMContentLoaded', function() {
			const selectedItems = JSON.parse(sessionStorage.getItem('selectedCartItems')) || [];
			const container = document.querySelector('.order-items-container');

			if (selectedItems.length > 0) {
				container.innerHTML = selectedItems.map(item => `
            <div class="order-item">
                <img src="${item.image}" alt="${item.name}" class="order-item-img">
                <div class="order-item-info">
                    <h4>${item.name}</h4>
                    <p>数量：${item.quantity}</p>
                    <p>单价：¥${item.price.toFixed(2)}</p>
                    <p>小计：¥${(item.price * item.quantity).toFixed(2)}</p>
                </div>
            </div>
        `).join('');
			} else {
				container.innerHTML = '<p class="no-items">暂无商品信息</p>';
			}
		});
		
		
	</script>
</html>
</body>
</html>